<template>
    <div class="navbar">
        <div class="navbar-left">
            <img src="@/assets/logo.png" alt="Logo" class="logo"/>
        </div>

        <div class="navbar-center">
            <span class="system-title">兼职管理系统</span>
        </div>

        <div class="navbar-right">
            <el-dropdown class="user-info-dropdown" @command="handleCommand" v-if="userInfo">
                <span class="el-dropdown-link">
                    <i class="el-icon-user"></i>
                    {{ userInfo.userName }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="viewProfile">查看个人信息</el-dropdown-item>
                    <el-dropdown-item command="logout">登出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <el-dialog 
            title="个人信息" 
            :visible.sync="isDialogVisible" 
            v-if="userInfo" 
            :before-close="handleClose"
            width="30%"
            custom-class="user-profile-dialog">
            <el-form label-position="left" label-width="80px">
                <el-form-item label="ID:">
                    <span>{{ userInfo.id }}</span>
                </el-form-item>
                <el-form-item label="姓名:">
                    <span>{{ userInfo.chName }}</span>
                </el-form-item>
                <el-form-item label="用户名:">
                    <span>{{ userInfo.userName }}</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="isDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="isDialogVisible = false">确定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import { getUserInfo } from "@/views/utils/userUtil";
import { mapGetters } from 'vuex';

export default {
    name: 'Navbar',
    data() {
        return {
            isDialogVisible: false,
          userInfo: {},
        }
    },
    computed: {
        ...mapGetters({
            userInfo: 'auth/user'
        })
    },
    created() {
        if (!this.userInfo) {
            this.userInfo = getUserInfo();
        }
    },
    methods: {
        handleCommand(command) {
            if (command === 'viewProfile') {
                this.viewProfile();
            } else if (command === 'logout') {
                this.$confirm('确认退出登录？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('auth/logout').then(() => {
                        this.$router.push('/login');
                    });
                }).catch(() => {});
            }
        },
        viewProfile() {
            this.isDialogVisible = true;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    done();
                })
                .catch(() => {});
        },
    }
};
</script>

<style>
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    background-color: #fff;
    color: #333;
    line-height: 64px;
    height: 64px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.logo {
    height: 32px;
}

.navbar-left {
    display: flex;
    align-items: center;
}

.navbar-center {
    text-align: center;
    flex: 1;
}

.system-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.navbar-right {
    display: flex;
    align-items: center;
}

.user-info-dropdown {
    margin-left: 20px;
    color: #666;
}

.el-dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #666;
}

.el-dropdown-link:hover {
    color: #409EFF;
}

.el-dropdown-link i {
    margin: 0 4px;
}

.el-dropdown-menu {
    min-width: 100px;
}

.el-dropdown-item {
    line-height: normal;
    padding: 10px 20px;
}

/* 响应式调整优化 */
@media (max-width: 768px) {
    .navbar {
        padding: 0 16px;
    }

    .system-title {
        font-size: 16px;
    }

    .logo {
        height: 28px;
    }
}

/* 对话框的基础样式 */
.dialog-footer {
    text-align: right;
}

.el-dialog .el-form-item {
    margin-bottom: 15px;
}

.el-dialog .el-form-item span {
    color: #666;
}

.user-profile-dialog {
    .el-dialog__body {
        padding: 20px 40px;
    }
    
    .el-form-item {
        margin-bottom: 20px;
    }

    .el-form-item span {
        font-size: 14px;
        color: #333;
    }
}
</style>
